<template>
  <div class="player-box">
      <video-player  class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="playerOptions">
      </video-player>
  </div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        muted: false,
        // aspectRatio: '16:9',
        fluid: true,
        poster: this.poster,
        sources: [{
          type: "video/mp4",
          src: JSON.parse(this.content).url
        }],
        width: document.documentElement.clientWidth,
        height: 200,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        // bigPlayButton: false,
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      }
    }
  },
  props: {
    content: {
      type: Object,
      default: []
    },
    poster: {
      type: String,
      default: ''
    }
  },
  mounted() {
		console.log(this.content)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  
  components: {
    videoPlayer
  }
}

</script>
<style scoped="scoped">
  .player-box {
    line-height: 0;
  }
	.player-box video {
			width: 100%;
			/* height: 200px; */
	}
	.player-box h1{
		font-size: 18px;
		color: #222222;
		line-height: 1.5;
		padding: 20px 20px 10px;
	}
  .vjs_video_3-dimensions.vjs-fluid{
    padding-top: 200px !important;
  }
</style>